<template>
  <div>
      <h1>Vue语法---指令</h1>
      <h1>{{ objArr }}</h1>
      <p v-for="(item,index) in objArr" :key="item.id">
        {{ index }} -- {{ item.name }} --{{ item.id }}
      </p>

      <p v-for="item in objArr" :key="item.id">
        {{ item.name }} --{{ item.id }}
      </p>


      <table border="1" width="100%">
        <tbody>
          <tr>
            <td>Id</td>
            <td>名子</td>
          </tr>
          <tr v-for="item in objArr" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
          </tr>
        </tbody>
      </table>

      <table  class="table table-bordered">
        <tbody>
          <tr class="bg-primary">
            <td>ID</td>
            <td>名子</td>
            <td>年龄</td>
            <td>头像</td>
            <td>出生年月</td>
            <td>性别</td>
            <td>操作</td>
          </tr>
          <tr v-for="item in data.stus" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <!-- <td><img v-bind:src="item.img" width="100" height="100"/></td> -->
            <td><img :src="item.img" width="100" height="100"/></td>
            <td>{{ moment(item.birth).format("YYYY年MM月DD日 hh:mm:ss") }}</td>
            <td>{{ item.sex == 1?'男':'女' }}</td>
            <td>
              <input type="button" value="修改" class="btn btn-primary">
              <input type="button" value="删除" class="btn btn-danger">
            </td>
          </tr>
        </tbody>
      </table>

      <select>
        <option value="">请选择</option>
        <option :value="item.id" v-for="item in cities" :key="item.id">{{ item.name }}</option>
      </select>
  </div>
</template>

<script setup lang="ts">
//v-on:绑定事件
//v-for:循环
//v-bind:单向绑定  用标签属性上 src  value  title

import {ref,reactive} from 'vue'
import moment from 'moment'

let objArr:any = ref([
  {id:1,name:'木吒'},
  {id:2,name:'金吒'},
  {id:3,name:'哪吒'},
])

let data:any = reactive({
  stus:[
    {id:1,name:'孙悟空',age:10000,img:"https://img1.baidu.com/it/u=2731531477,3612506282&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067",sex:1,birth:'2000-01-02T20:00:03'},
    {id:2,name:'猪八戒',age:100,img:"https://img1.baidu.com/it/u=2731531477,3612506282&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067",sex:0,birth:'2000-01-02T20:00:03'},
    {id:3,name:'沙僧',age:10000,img:"https://img1.baidu.com/it/u=2731531477,3612506282&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067",sex:1,birth:'2006-07-09T20:00:03'},
    {id:4,name:'唐生',age:10000,img:"https://img1.baidu.com/it/u=2731531477,3612506282&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067",sex:1,birth:'2000-01-02T20:00:03'},
    {id:5,name:'势单力薄',age:10000,img:"https://img2.baidu.com/it/u=71366600,611144520&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1440",sex:0,birth:'2000-01-02T20:00:03'},
  ]
})

let cities:any = ref([
  {id:1,name:'北京'},
  {id:2,name:'上海'},
  {id:3,name:'深圳'},
  {id:4,name:'天津'},
  {id:5,name:'河北'},

])

</script>

<style scoped>

</style>